<template>
	<view class="page page-body">
		
		<!-- 头部背景 -->
		<view :class="['homebg',isActive?'active':'']" :style="{'background-color':backgroundColor}"></view>
		<!-- 状态栏 -->
		<view  class="status" :style="{ position: headerPosition,top:statusTop,'background-color':'rgba(242,61,61,'+afterHeaderOpacity+')'}" ></view>
		<!-- 顶部导航栏 -->
		<view  class="header" :style="{ position: headerPosition,top:headerTop,'background-color':'rgba(242,61,61,'+afterHeaderOpacity+')'}" >
			<!-- 搜索框 -->
			<view class="input-box" @click.stop="toSearch">
				<input
					placeholder="请输入搜索内容"
					placeholder-style="color:#c0c0c0;" disabled
				/>
				<view class="icon search"></view>
			</view>
			<!-- 右侧图标按钮 -->
			<view class="icon-btn">
				<image src="/static/img/icon/i-news_has.png" @tap="toMsg"></image>
				<view class="dot" v-if="hasNotice"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place" v-if="isshowpalce"></view>
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll" :color="afterHeaderOpacity>0?'transparent':'#fff'">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper,ii) in swiperList" :key="ii">
						<image :src="swiper.path" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper == index ? 'on' : '']"
						:key="index">
					</view>
				</view>
			</view>
		</view>
		<view class="tag flex">
			<view class="flex"><w-icon type="zhengque" size="14"></w-icon><text>知名国际品牌</text></view>
			<view class="flex"><w-icon type="zhengque" size="14"></w-icon><text>7个工作日内发货</text></view>
			<view class="flex"><w-icon type="zhengque" size="14"></w-icon><text>每日更新新品</text></view>
		</view>
		<!-- 分类列表 -->
	<!-- 	<view class="category-list">
			<view class="category"
				v-for="(row, index) in categoryList" v-if="index<=7"
				:key="index"
				@tap="toCategory(row)">
				<view class="img"><image :src="row.index_icons" ></image></view>
				<view class="text">{{ row.name }}</view>
			</view>
		</view> -->
		<!-- 广告图 -->
		<!-- <view class="banner" ><image :src="advert.path" @click="golink(advert)"></image></view> -->
		
		<!-- 活动区 -->
		
		<!-- 热销推荐4件  -->
		<view class="goods-list">
			<view class="title">
				<text>热销推荐</text>
			</view>
			<goods :listData="listHotData"></goods>
		</view>
		<!-- 最新上架 -->
		<view class="goods-list goods-newest">
			<view class="title">
				<text>最新上架</text>
			</view>
			<goods :listData="listData" type="across"></goods>
			<load-more  :listnull="listnull" :loadtype="loadtype" text0="正在加载中..." text2=" " ></load-more>
		</view>
		</mix-pulldown-refresh>
		<!-- 新手弹框-->
		<pop-out ref="newer" type="0" padding="0">
			<block slot="content">
				<view class="newer">
					<view class="t-p">— 恭喜您获得 —</view>
					<view class="t-h">数易汇新手见面礼！</view>
					<view class="coupon">
						<view class="p">注册得100元优惠劵</view>
						<view class="i"></view>
						<view class="pp">庆数易汇上线新人福利</view>
						<view class="coupon-num"><text>100</text>元优惠劵</view>
					</view>
					<view class="btn" @click="getCoupon">
						<image src="/static/img/icon/kai.png"></image>
					</view>
				</view>
			</block>
		</pop-out>	
		<!-- #ifdef APP-PLUS -->
		<!-- 更新提示 -->
		<view :class="['state state2 flex update ',isUpdate?'fadein':'']" >
			<view class="mask" :class="{'fadein':isUpdate}"  @touchmove.stop.prevent=""></view>
			<view class="body">
				<!-- 热更新&包更新 -->
				<view class="cont" @touchmove.stop.prevent="">
					<!-- <image class="img-down" src="/static/img/download.png"></image> -->
					<view class="h3">发现新版本{{upDateData.versionNumber}}</view>
					<!-- <view class="p" v-for="(item,ii) in upDateData.updateDescription" :key="ii">{{item}}</view> -->
					<view class="progress">  
						<text class="txt" @tap="bepDate" v-if="!showUpLoad&&progress==0">立即更新</text>
						<text class="txt" v-else-if="progress==100">正在安装</text>
						<text class="txt" v-else-if="progress==0">正在请求资源</text>
						<text class="txt" v-else>下载中</text>
						<view class="btn" :style="{'background':showUpLoad?'#dfdfdf':'linear-gradient(0deg, #ff7201 0%, #ff811b 100%)'}">
							<view class="btn-progress" :style="{'width':progress+'%'}" v-if="progress>0"></view>
						</view>
						<view class="msg-progress flex" v-if="showUpLoad">
							<text>{{downloadedSize}}M/{{totalSize}}M</text>
							<text>{{progress}}%</text>
						</view>
					</view>
					<view class="i-close" v-if="!forceUpdate" @tap="close2"><w-icon type="close" color="#d3d3d3" size="20"></w-icon></view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 实时轮播 -->
		<scroll-view scroll-y="true" style="height: 60upx;" class="joinList">
			<swiper  :autoplay="true" :interval="3000" :duration="1000" circular vertical >
				<swiper-item>
					<view class="join-item flex">
						<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
						<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>刚刚购买了10份</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="join-item flex">
						<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
						<view class="user-msg flex1"><text class="name text_over">拥抱的月亮</text>刚刚购买了某某某</view>
					</view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex'
import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
import defalut from '@/components/defalut.vue';
import loadMore from '@/components/load-more.vue';
import {pageLoad} from '@/utils/request.js';
import {lazyload} from '@/utils/utils.js';
import goods from '@/components/goods.vue';
import update from '@/utils/update.js';
import popOut from '@/components/pop-out.vue';
// #ifdef APP-PLUS
import sql from '@/utils/websql.js';
// #endif
var ttt = 0;
var that;
var currentWebview;
export default {
	mixins: [update],
	data() {
		return {
			page:1,
			listData:[],
			listHotData:[],
			loadtype:1,
			listnull:false,
			winHeight:this.$store.state.winHeight,
			advert:"",
			afterHeaderOpacity:0,//不透明度
			headerPosition: 'fixed',
			headerTop:null,
			statusTop:null,
			nVueTitle:null,
			city: '北京',
			currentSwiper: 0,
			// 轮播图片
			swiperList: [],
			// 分类菜单
			categoryList: [],
			Promotion: [],
			//猜你喜欢列表
			productList: [],
			hasNotice:0,
			backgroundColor:"",
			isActive:false,
			isshowpalce:true
		};
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop>=0?"fixed":"static";
		this.isshowpalce = e.scrollTop>=0?true:false
		let tmpY = 88;
		e.scrollTop = e.scrollTop > tmpY ? 88 : e.scrollTop;
		this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
		
	},
	onLoad() {
		that=this;
		// #ifdef APP-PLUS
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
		this.getBanner()
		// this.getBanner2();
		// this.cateSql()//获取数据库里面的数据
		// this.getCategoryList()
		this.getProductList()
		this.getProductListNewest(true)
		if(this.hasLogin){
			this.getMsgCount()
		}
	},
	onShow(){
		that = this;
		
		// #ifdef APP-PLUS
		/* 更新检测 */
		// if(!this.isUpdate){
		// 	uni.showTabBar();
		// }
		// this.upDateCheck()
		// #endif
	
		// if(this.hasLogin){
		// 	this.$refs.newer.close()
		// }
	},
	onReady() {
		/* 未登录 */
		// if(!this.hasLogin){
		// 	this.$refs.newer.show()
		// }else{
		// 	this.$refs.newer.close()
		// }
	},
	methods: {
		cateSql(){
			// #ifdef APP-PLUS
			/* 查询数据，没有就请求接口，重新创建数据,有就直接渲染 */
			sql.openDatabase().then(()=>{
				sql.selectSql("select * from Category order by id desc").then((res)=>{
					console.log(JSON.stringify(res))
					that.categoryList = res
				}).catch((res)=>{
					that.getCategoryList()
				})
			})
			// #endif
		},
		getCategoryList(){
			this.$https.POST({
				url:'/goods/goodsCategory',
				data:{
					show_in_nav:1
				},
				success(res){
					that.categoryList=res.data
				}
			}).then((result)=>{
				// result.data[0].name="枕头2"
			// #ifdef APP-PLUS
				result.data.forEach( async (item,index)=>{
					item.index_icons = await lazyload(item.index_icons)
				})
			
				sql.openDatabase().then(sql.creatCategoryTable).then(()=>{
					result.data.forEach((item,index)=>{
						if(index<8){
							sql.executeSQL(`replace into Category (id, index_icons, name) values(${item.id},"${item.index_icons}","${item.name}")`)
						}
					})
				}).then(sql.closeDatabase)
			// #endif
		})
		},
		getProductList(){
			this.$https.POST({
				url:"/goods/goodsList",
				data:{
					
				},
				success(res){
					res.data.length = 4;
					that.listHotData = res.data;
				}
			})
		},
		getProductListNewest(isReload){
			pageLoad({
				url:"/goods/goodsList",
				that: that,
				isReload: isReload,
				emptyList:false,
				data:{
					is_recommend:1
				},
				success(res){
					res.data.forEach((item)=>{
						item.loaded = false
					})
					uni.stopPullDownRefresh();
					ttt=1;
				}
			})
		},
		getBanner(){
			this.$https.POST({
				url:'/public/advert',
				data:{
					code:'shopHomeTop'
				},
				success(res){
					that.swiperList = res.data;
					that.backgroundColor = res.data[0].backgroundColor;
					that.currentSwiper = 0;
					
				}
			})
		},
		getBanner2(){
			this.$https.POST({
				url:'/public/advert',
				data:{
					code:'shopHomeCentral'
				},
				success(res){
					if(res.data[0]){
						// res.data=[{path:"/static/img/category/lbanner.png",url:"#"}]
						that.advert = res.data[0];
					}
				}
			})
		},
		//消息列表
		toMsg(){
			if(!this.hasLogin){
				this.$showToast('请先登录')
				setTimeout(function() {
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}, 800);
				return;
			}
			uni.navigateTo({
				url:'../../msg/msg'
			})
		},
		getMsgCount(){
			this.$https.POST({
				url:'/user/noticeCount',
				data:{
				},
				success(res){
					if(res.data.count>0){
						that.hasNotice = 1
					}else{
						that.hasNotice = 0
					}
					//#ifdef APP-PLUS
					// that.nVueTitle.postMessage({
					// 	hasNotice:that.hasNotice
					// })
					// #endif
				}
			})
		},
		//搜索跳转
		toSearch() {
			uni.navigateTo({
				url:"/pages/tabBar/home/search/search"
			})
		},
		//轮播图跳转
		toSwiper(e) {
			let url = e.url
			uni.navigateTo({
				url:url
			})
		},
		goLink(e){
			let url = e.url;
			uni.navigateTo({
				url:url
			})
		},
		//分类跳转
		toCategory(e) {
			uni.setStorageSync('catName',e.name);
			uni.navigateTo({
				url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
			});
		},
		//推荐商品跳转
		toPromotion(e) {
			uni.showToast({ title: e.title, icon: 'none' });
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
			let swiperList = this.swiperList;
			let backgroundColor =  swiperList[event.detail.current].backgroundColor
			this.backgroundColor = backgroundColor;	
			this.isActive = true;
			//#ifdef APP-PLUS
			// currentWebview.setStyle({
			// 	backgroundColorTop:backgroundColor
			// })
			// #endif
			
		},
		switchCity(){
			uni.navigateTo({
				url:"/pages/user/switchcity/switchcity"
			})
		},
		setEnableScroll(enable){//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			if(this.enableScroll !== enable){
				this.enableScroll = enable;
			}
		},
		onPulldownReresh(){
			this.getBanner()
			this.getBanner2()
			this.getCategoryList()
			this.getProductList(true)
			if(this.hasLogin){
				this.getMsgCount()
			}
			// 关闭下拉刷新
			this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
		},
		getCoupon(){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		},
		checkCoupon(){
			uni.navigateTo({
				url:"/pages/user/coupon/coupon"
			})
		},
		useCoupon(){
			uni.navigateTo({
				url:"../../goods/goods-list/goods-list"
			})
		}
	},
	onReachBottom() {
		this.getProductListNewest(false)
	},
	computed:mapState({
		hasLogin(state){
			return state.hasLogin==""?false:true
		},
		isNewUser(state){
			return state.isNewUser
		},
		hasNetwork(state){
			return state.isConnected
		}
	}),
	components:{
		defalut,
		loadMore,
		goods,
		mixPulldownRefresh,
		popOut
	},
	onUnload(){
		that=null;
	},
	watch:{
		hasNetwork(newValue,oldValue){
			console.log(newValue)
			if(newValue){
				this.getBanner()
				this.getBanner2()
				this.getCategoryList()
				this.getProductList(true)
			}else{
				this.cateSql()
			}
		}
	}
};
</script>
<style lang="scss">
	.newer{
		color: #ffe2b1;border-radius: 16upx; height:718upx;background:url() no-repeat center;background-color:#f3584c;background-size:560upx 718upx;
		.t-p{text-align: center;font-size: 30upx;line-height: 40upx;padding-top: 26upx;}
		.t-h{text-align: center;font-size: 48upx;line-height: 100upx;margin-left: 26upx;}
		.coupon{
			width: 248upx;height: 234upx;text-align: center;background:url() no-repeat center; 
			background-size:248upx 234upx ;
			margin:0 auto;border-radius:6upx; margin-top:20upx;
			.p{font-size:20upx ;color: #ce7f31;position: relative;padding-top: 35upx;line-height: 36upx;border-bottom: 1px solid #ce7f31;display: inline-block;}
			.i{
				position: relative; width: 18upx;background: #ffe6ca;height:10upx ;z-index: 2;margin: -6upx auto 0;
			}
			.i::after{
				content: ""; display: block; position: absolute; width: 5upx;height: 5upx;border:1px solid #ce7f31;background:#ffe6ca ;transform: rotate(45deg);left: 6upx;
			}
			.pp{font-size: 16upx;color: #ce7f31;line-height: 30upx;}
			.coupon-num{
				font-size:30upx;color:#df1c1d;line-height:60upx;
				text{font-size: 44upx;}
			}
		}
		.btn{
			text-align:center; margin-top:40upx; 
			image{width: 178upx;height: 178upx;animation:pulse .7s infinite ease-in-out;}
		}
	}
	// .newerRegister{
	// 	background: #f3584c;color: #ffe2b1;border-radius: 16upx; height:640upx;text-align:center;
	// 	.t-p{font-size: 42upx;position: relative;line-height: 70upx;padding-top: 32upx;display: inline-block;font-weight: bold;}
	// 	.t-p::after,.t-p::before{
	// 		content: "";display: block; position: absolute; left:-32upx;top:58upx;width: 20upx;height: 20upx;background: url(/static/img/user/n-t-l.png) no-repeat center/20upx;
	// 	}
	// 	.t-p::after{left: auto;right: -32upx;background-image:url(/static/img/user/n-t-r.png);}
	// 	.t-h{font-size: 26upx;line-height: 46upx;;}
	// 	.coupon{
	// 		 width:442upx ;height: 225upx;background: url(/static/img/user/coupon.png) no-repeat center/442upx 225upx; margin:60upx auto 80upx;text-align: left;
	// 		 .coupon_num,.coupon_rule{padding-left: 65upx;}
	// 		 .coupon_num{
	// 			 color: #f3584c;font-size: 88upx; line-height:100upx; padding-top:16upx;
	// 			 text{font-size: 32upx;line-height: 32upx;}
	// 		 }
	// 		 .coupon_rule{font-size: 28upx;color: #ce7f31;line-height: 40upx;}
	// 		 .p{text-align: center;font-size: 20upx;color: #ce7f31;margin-top: 16upx;line-height: 50upx;}
	// 	}
	// 	.btn{width: 480upx;height: 88upx;line-height: 88upx;background: #e5c287;font-size:32upx ;color: #232323;border-radius: 44upx;margin: 0 auto ;}
	// }
	
	@keyframes pulse {
	  from {
	    -webkit-transform: scale3d(.9, .9, .9);
	    transform: scale3d(.9, .9, .9);
	  }
	
	  50% {
	    -webkit-transform: scale3d(1.05, 1.05, 1.05);
	    transform: scale3d(1.05, 1.05, 1.05);
	  }
	
	  to {
	    -webkit-transform: scale3d(.9, .9, .9);
	    transform: scale3d(.9, .9, .9);
	  }
	}
	
	.pulse {
	  -webkit-animation-name: pulse;
	  animation-name: pulse;
	  animation-duration: 1s;
	  animation-iteration-count:infinite;
	}
page{position: relative;background-color: #F6F6F6;}
.panel-content{z-index: 1;}
.dot{width:16upx;height:16upx; background:$maincolor;color: #fff;text-align: center;border-radius:50%;position: absolute;right: 44upx;top: 24upx;}
.homebg{
	position: absolute;top: 0;left: 0;right:0;background:#ffcc00;height:310upx;border-radius: 0 0 80upx 80upx;  z-index: 1;  
}
.homebg.active{transition: background-color .5s linear;}
.pullDown-effects{
	position: fixed;
	//top: calc(100upx - 36vw);
	top: 0;
	z-index: 9;
	width: 100%;
	height: 36vw;
	/*  #ifdef  APP-PLUS  */
	padding-top: var(--status-bar-height);
	/*  #endif  */
	image{
		width: 100%;
		height: 36vw;
	}
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: transparent;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}
.header {
	// width: 92%;
	padding-left:4%;
	height: 90upx;
	width:96%;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: transparent;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */

	.addr {
		width: 120upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		font-size: 28upx;
		.icon {
			height: 60upx;
			margin-right: 5upx;
			display: flex;
			align-items: center;
			font-size: 42upx;
			color: #ffc50a;
		}
	}
	.input-box {
		width: 100%;
		height: 66upx;
		line-height: 66upx;
		background-color: #fff;
		border-radius: 40upx;
		position: relative;
		display: flex;
		align-items: center;
		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 66upx;
			font-size: 34upx;
			color: #c0c0c0;
		}
		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
		}
	}
	.icon-btn {
		width: 130upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		
		image{width: 46upx;height: 46upx;padding:4px 36upx;}
	}
}
.place {
	background-color: #ffffff;
	height: 100upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.swiper {
	width: 100%;
	padding-top: 20upx;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 92%;
		height: 35.2vw;
		overflow: hidden;
		border-radius: 15upx;
		// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		//兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 35.2vw;
			swiper-item {
				image {
					width: 100%;
					height: 35.2vw;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 0;
			width: 100%;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			justify-content:center;
			.dots {
				width: 12upx; height: 12upx;
				margin: 0 10upx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .3);
				&.on {
					background-color: rgba(255, 255, 255, .8);
				}
			}
		}
	}
}

.category-list {
	border-radius: 15upx;
	background: #fff;
	width: 92%;
	margin: 20upx 4% 0;
	padding: 0 0 30upx 0;
	display: flex;
	// justify-content: space-between;
	flex-wrap: wrap;
	.category {
		width: 25%;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
		.img {
			width: 100%;
			display: flex;
			justify-content: center;
			image {
				width: 10.67vw;
				height: 10.67vw;
			}
		}
		.text {
			margin-top: 16upx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 26upx;
			color: #3c3c3c;
		}
	}
}
.banner {
	width: 92%;
	margin: 40upx 4%;
	image {
		width: 100%;
		height: 20vw;
		border-radius: 10vw;
	}
}
.goods-list {
	margin-top:50upx;
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40upx;
		color: #333;
		font-size: 34upx;
		padding-bottom:40upx;
		text{padding: 0 20upx;}
		image {
			width: 42upx;
			height: 18upx;
			margin-top: 6upx;
		}
	}
}
/* 更新样式 */
.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0;  top: 0; bottom: 0;right: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 34upx;text-align: center;font-weight: bold;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; font-size: 28upx;}
		.act-pic{
			width: 200upx;height: 200upx;margin: 0 auto 20upx;display: block;
		}
	}
	.state.fadein{
		opacity: 1;z-index: 10000;
	}
	.actrule{transition-duration: .02s;}
	.mask{display: block;opacity: 0;transition: opacity .2s linear;}
	.mask.fadein{opacity: 1;}
	.update{
		.img-down{width: 292upx;height: 135upx;padding: 60upx 0 30upx;display: block;margin: 0 auto;}
		.p{text-align: left; padding: 0 40upx;font-size: 28upx;line-height: 50upx;color: #535970;}
		.h3{font-size: 40upx;position: relative;color:#0e1327 ;margin-bottom: 20upx;}
		.h3:after{
			content: "";display: block;height: 6upx;width:65upx ;position: absolute;left: 50%;margin-left: -32upx;background: #0e1327;
		}
		.progress{ width: 410upx;position: relative;margin:60upx auto 20upx;}
		.progress .txt{position: absolute;width: 100%;text-align: center;z-index: 2;display: block;color: #fff;line-height: 80upx;}
		.btn{overflow: hidden;border-radius: 40upx;height: 80upx;background: #dfdfdf;position: relative;width: 100%;}
		.btn-progress{width: 410upx;height: 80upx;background: linear-gradient(0deg, #ff7201 0%, #ff811b 100%);position: absolute;left: 0;top: 0;transition: width .1s linear; }
		.msg-progress{position: absolute;top: -46upx;line-height: 46upx;width: 100%;color: #535970;height: 46upx;justify-content: space-between;font-size: 22upx;padding: 0 6upx;}
		.i-close{
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
			width: 90upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
		}
	}
/* 参与记录 */
.joinList{
	position: fixed;top: 12vh;z-index: 3;
	swiper{height: 60upx;}
	swiper-item{height: 60upx;}
	.join-item{
		color: #fff;background: rgba(0,0,0,.6);width:auto;display: inline-flex;padding-right: 20upx;
		.user-img{width: 60upx;height: 60upx;margin-right: 16upx;}
		.user-msg{
			.name{width: 150upx;}
			.copies{color: $maincolor;}
		}
		.time{padding-right:10upx;}
	}
}
</style>
